<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework." />
		<meta name="keywords" content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, visualization, web app, application" />
		<meta name="author" content="hencework"/>

		<!-- Custom CSS -->
		<link href="dist/css/style.css" rel="stylesheet" type="text/css">
		<script src="dist/js/echarts.min.js"></script>
	</head>
	<body>
	<!--/Preloader-->
    	<div class="wrapper  theme-1-active pimary-color-blue">
			<!-- Main Content -->
				<div class="row">
					<div class="col-lg-6">
						<div class="panel panel-default card-view">
							<div class="panel-heading">
								<div class="pull-left">
									<h6 class="panel-title txt-dark">应聘者学历统计</h6>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="panel-wrapper collapse in">
								<div class="panel-body" >
									<!--图表区域-->
									<div id="main1" style="height: 700px"></div>
								</div>
							</div>
						</div>
					</div>

					<div class="col-lg-6">
						<div class="panel panel-default card-view">
							<div class="panel-heading">
								<div class="pull-left">
									<h6 class="panel-title txt-dark">应聘者学历占比</h6>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="panel-wrapper collapse in">
								<div class="panel-body">
									<!--图表区域-->
									<div id="main2" style="height: 700px"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
   	 </div>

		<!-- jQuery -->
		<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
		<!-- Bootstrap Core JavaScript -->
		<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<!-- ChartJS JavaScript -->
		<script src="vendors/chart.js/Chart.min.js"></script>
		<script src="dist/js/chartjs-data.js"></script>
		<!-- Slimscroll JavaScript -->
		<script src="dist/js/jquery.slimscroll.js"></script>
		<!-- Fancy Dropdown JS -->
		<script src="dist/js/dropdown-bootstrap-extended.js"></script>
		<!-- Owl JavaScript -->
		<script src="vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
		<!-- Switchery JavaScript -->
		<script src="vendors/bower_components/switchery/dist/switchery.min.js"></script>
		<!-- Init JavaScript -->
		<script src="dist/js/init.js"></script>

	<script>
		//1.创建2个echarts对象
		var myChart1 = echarts.init(document.getElementById("main1"));
		var myChart2 = echarts.init(document.getElementById("main2"));

		//2.发送ajax请求
		$.post("/lagou_visualization/edu/eduCount.do",function(data){
			//3.回调函数中,设置两个echarts option
			myChart1.setOption({
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {            // 坐标轴指示器，坐标轴触发有效
						type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true //grid 区域是否包含坐标轴的刻度标签
				},
				xAxis: [
					{
						type: 'category',
						data: data.data.names,
						axisTick: {   //配置坐标轴刻度
							alignWithLabel: true  //true 有效,保证刻度线和标签对齐
						}
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '岗位人数',
						type: 'bar',  //柱状图
						label: {     //图上添加文字
							show: true,
							position: 'inside'
						},
						barWidth: '60%',
						data: data.data.countNum
					}
				]
			});

			myChart2.setOption({
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b} : {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: data.data.names
				},
				series: [
					{
						name: '学历占比',
						type: 'pie',
						radius: '55%',  //代表饼图的半径
						center: ['50%', '60%'],  //饼图圆心的坐标
						data: data.data.eduData,
						emphasis: {   //高亮扇区和标签的样式
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			});
		},"json")




	</script>
		
	</body>
</html>
